
:root {
    --color-gray-3: #cbcbcb;
    --color-gray-4: #a5a5a5;
    --color-gray-light: #999;
    --color-gray: #666666;

    --color-blue-2: #5b9bea;
    --color-blue-3: #5293e2;
    --color-blue-light: #3a83db;

    --background-normal: #fff;
    --background-tabbar: #f7f7f7;
    --background-button: #fff;
    --background-accent-button: #3483db;
    --background-primary-button: #444;
    --background-scrim: fade(#000, 20%);
    --background-scroll-thumb: #e0e0e0;

    --highlight-button-hover: #e0e0e0;
    --highlight-button-pressed: #ccc;
    --highlight-button-pressed-hover: #bababa;
    --highlight-accent-button-hover: #5293e2;
    --highlight-accent-button-pressed: #3475c5;
    --highlight-primary-button-hover: #2b2b2b;
    --highlight-primary-button-pressed: #2b2b2b;
    --highlight-header-button-hover: fade(#fff, 20%);
    --highlight-text-select: #3494fb;
    --highlight-scroll-thumb-hover: #ccc;
    --highlight-scroll-track-hover: fade(#000, 3%);

    --border-tabbar: #cbcbcb;
    --border-divider: #dfdfdf;
    --border-regular-control: #c0c0c0;
    --border-control-focus: #848484;
    --border-error: #f62211;

    --text-normal: fade(#000, 80%);
    --text-normal-pressed: fade(#000, 80%);
    --text-secondary: fade(#000, 60%);
    --text-tertiary: fade(#000, 40%);
    --text-link: #445799;
    --text-inverse: #fff;
    --text-contrast-background: #fff;

    --icon-normal: fade(#000, 80%);
    --icon-notification-badge: #000;

    --disabled-element-opacity: .4;
    --theme-inverted-image-filter: none;
}

@color-gray-3: var(--color-gray-3);
@color-gray-4: var(--color-gray-4);
@color-gray-light: var(--color-gray-light);
@color-gray: var(--color-gray);

@color-blue-2: var(--color-blue-2);
@color-blue-3: var(--color-blue-3);
@color-blue-light: var(--color-blue-light);

@background-normal: var(--background-normal);
@background-tabbar: var(--background-tabbar);
@background-button: var(--background-button);
@background-accent-button: var(--background-accent-button);
@background-primary-button: var(--background-primary-button);
@background-scrim: var(--background-scrim);
@background-scroll-thumb: var(--background-scroll-thumb);

@highlight-button-hover: var(--highlight-button-hover);
@highlight-button-pressed: var(--highlight-button-pressed);
@highlight-button-pressed-hover: var(--highlight-button-pressed-hover);
@highlight-accent-button-hover: var(--highlight-accent-button-hover);
@highlight-accent-button-pressed: var(--highlight-accent-button-pressed);
@highlight-primary-button-hover: var(--highlight-primary-button-hover);
@highlight-primary-button-pressed: var(--highlight-primary-button-pressed);
@highlight-header-button-hover: var(--highlight-header-button-hover);
@highlight-text-select: var(--highlight-text-select);
@highlight-scroll-thumb-hover: var(--highlight-scroll-thumb-hover);
@highlight-scroll-track-hover: var(--highlight-scroll-track-hover);

@border-tabbar: var(--border-tabbar);
@border-divider: var(--border-divider);
@border-regular-control: var(--border-regular-control);
@border-control-focus: var(--border-control-focus);
@border-error: var(--border-error);

@text-normal: var(--text-normal);
@text-normal-pressed: var(--text-normal-pressed);
@text-secondary: var(--text-secondary);
@text-tertiary: var(--text-tertiary);
@text-link: var(--text-link);
@text-inverse: var(--text-inverse);
@text-contrast-background: var(--text-contrast-background);

@icon-normal: var(--icon-normal);
@icon-notification-badge: var(--icon-notification-badge);

@disabled-element-opacity: var(--disabled-element-opacity);
@theme-inverted-image-filter: var(--theme-inverted-image-filter);
